<template>
	<view class="min-h-screen bg-gray-50 px-4 py-6">
		<view class="grid grid-cols-2 gap-4">

			<navigator v-for="item,index in menu" :key="index" :url="item.url"
				class="aspect-square bg-white rounded-2xl p-6 shadow-sm flex flex-col items-center justify-center space-y-4 active:bg-gray-50 transition-colors">
				<view class="w-20 h-20  rounded-full flex items-center justify-center" :class="[item.bgc]">
					<text class="text-4xl">{{item.icon}}</text>
				</view>
				<text class="text-lg font-medium text-gray-800">{{item.name}}</text>
			</navigator>

			<!-- 清除历史记录 -->
			<!-- <view
				class="aspect-square bg-white rounded-2xl p-6 shadow-sm flex flex-col items-center justify-center space-y-4 active:bg-gray-50 transition-colors"
				@click="deleteOldRecords">
				<view class="w-20 h-20 bg-red-50 rounded-full flex items-center justify-center">
					<text class="text-4xl">🆑</text>
				</view>
				<text class="text-lg font-medium text-gray-800">清除历史记录</text>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		StorageService
	} from "@/utils/storage";
	import {
		msg
	} from "@/utils/msg";


	const menu = [{
		name: '入库扫码',
		icon: '📥',
		url: '/pages/scan/index?type=in',
		bgc: 'bg-blue-50',
	}, {
		name: '出库扫码',
		icon: '📤',
		url: '/pages/scan/index?type=out',
		bgc: 'bg-pink-50',
	}, {
		name: '更换合格证',
		icon: '📝',
		url: '/pages/certificate/index',
		bgc: 'bg-green-50',
	}, {
		name: '物料调整',
		icon: '📝',
		url: '/pages/changeMaterial/index',
		bgc: 'bg-purple-50',
	}]

	// const deleteOldRecords = () => {
	// 	uni.showModal({
	// 		title: '提示',
	// 		content: '确认清除历史数据?',
	// 		success: async (res) => {
	// 			if (res.confirm) {
	// 				//获取待同步数据
	// 				const records = await StorageService.getRecords();

	// 				const pendingCount = records.filter(item => !item.synced).length
	// 				console.log(pendingCount);
	// 				if (pendingCount > 0) return msg('有未同步数据，请同步后清空！')

	// 				await StorageService.deleteOldRecords()
	// 			}
	// 		}
	// 	});
	// };
</script>